<template>
	<view class="scenicAreaDetails">
		<!-- 景区/特产/住宿详情 -->
		<u-navbar :title="title" :autoBack="true"></u-navbar>
		<view class="scenicAreaDetailsTop">
			<img :src="listSwiperStr" alt="" />
		</view>
		<view class="scenicAreaDetailsSwiper">
			<u-swiper bgColor="#f3f4f600" :list="photo" @change="changeSwiper" circular :autoplay="false"
				indicatorStyle="right: 20px" height="650rpx" radius="10" easingFunction="linear">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ photo.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="scenicAreaDetailsDiv">
			<view class="scenicAreaDetailsDivTitle">
				<view class="scenicAreaDetailsDivTitleL">
					{{details.title}}
				</view>
				<view class="scenicAreaDetailsDivTitleDiv" @click="clickCollectAdd">
					<img v-if="!isUserInfoIsNotCollect" src="/static/my/shoucang1.png" alt="" />
					<img v-else src="/static/my/shoucang.png" alt="" />
					<span>{{quantity.collectNum}}</span>
				</view>
			</view>
			<view class="scenicAreaDetailsDivPrice">
				人均价格: <span style="margin-left: 10rpx;">{{details.price?`¥${details.price}`:'免费'}}</span>
			</view>
			<view class="scenicAreaDetailsDivTag">
				<view class="scenicAreaDetailsDivTagItem" v-for="(item,index) in details.label" :key="index">{{item}}
				</view>
			</view>
			<view class="scenicAreaDetailsDivIcon">
				<view class="scenicAreaDetailsDivIconItem" @click="goPopup(0,'简介',details.introduction)">
					<img src="/static/jianjie.png" alt="" />
					简介
				</view>
				<view class="scenicAreaDetailsDivIconItem" @click="goPopup(1,'须知',details.tips)">
					<img src="/static/xuzhi.png" alt="" />
					须知
				</view>
				<view class="scenicAreaDetailsDivIconItem" @click="goPopup(2,'交通攻略',details.trafficStrategy)">
					<img src="/static/jiaotong.png" alt="" />
					交通攻略
				</view>
				<view class="scenicAreaDetailsDivIconItem" @click="goPopup(3,'营业时间',details.business)">
					<img src="/static/yinye.png" alt="" />
					营业时间
				</view>
			</view>
			<view class="scenicAreaDetailsDivList">
				<view class="scenicAreaDetailsDivListItem" v-if="details.phone">
					<u-avatar slot="icon" shape="square" size="20" src="/static/shouji.png"
						customStyle="margin: -3px 5px -3px 0"></u-avatar>
					<span>{{details.phone}}</span>
				</view>
				<view class="scenicAreaDetailsDivListItem" v-if="details.address">
					<u-avatar slot="icon" shape="square" size="20" src="/static/dizhi.png"
						customStyle="margin: -3px 5px -3px 0"></u-avatar>
					<span>{{details.address}}</span>
				</view>
			</view>
			<view class="scenicAreaDetailsDivAdmissionFee" v-if="details.scenicTickets">
				<h1>门票信息</h1>
				<view class="scenicAreaDetailsDivAdmissionFeeTop" v-if="scenicTickets.length <=0">
					景区免费开放
				</view>
				<view class="scenicAreaDetailsDivAdmissionFeeCen" v-else>
					<view class="scenicAreaDetailsDivAdmissionFeeCenItem"
						:style="index==scenicTickets.length-1?'border:none;':''" v-for="(item,index) in scenicTickets"
						:key="index">
						<h2>{{item.title}}</h2>
						<view class="scenicAreaDetailsDivAdmissionFeeCenItemTag">
							<view class="scenicAreaDetailsDivTagItem" v-for="(it,ind) in item.label" :key="ind">{{it}}
							</view>
						</view>
						<view class="scenicAreaDetailsDivAdmissionFeeCenItemGm">
							<view class="" @click="goPopup(4,'购买须知',item.notice)">
								购买须知 >
							</view>
							<p>
								<span>￥</span>
								{{item.price}}
							</p>
						</view>
					</view>
				</view>
			</view>
			<view class="scenicAreaDetailsDivHotelList" v-if="details.hotelList">
				<h1>房型信息</h1>
				<view class="scenicAreaDetailsDivHotelListTop" v-if="hotelList.length <=0">
					暂无房型
				</view>
				<view class="scenicAreaDetailsDivHotelListCen" v-else>
					<view class="scenicAreaDetailsDivHotelListCenItem"
						:style="index==hotelList.length-1?'border:none;':''" v-for="(item,index) in hotelList"
						:key="index">
						<view class="scenicAreaDetailsDivHotelListCenItemImg" @click="amplify(item.photo)">
							<img :src="item.photo[0]" alt="" />
						</view>
						<view class="scenicAreaDetailsDivHotelListCenItemCen">
							<view class="scenicAreaDetailsDivHotelListCenItemTitle">
								<h2>{{item.title}}</h2>
								<p>￥<span>{{item.price}}</span></p>
							</view>
							<view class="scenicAreaDetailsDivHotelListCenItemB">
								{{item.description}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="scenicAreaDetailsDivStrategy">
				<view class="scenicAreaDetailsDivStrategyTOP">
					推荐玩法
				</view>
				<scroll-view class="scroll-view_H" :scroll-x="true" scroll-left="120">
					<view class="scrollviewHList">
						<view class="scrollviewHItem" v-for="(item,index) in strategyListNewList" :key="index"
							@click="goJump(item)">
							<img :src="item.photo[0]" alt="" />
							<view class="scrollviewHItemtitle">
								{{item.title}}
								<view class="scrollviewHItemtitleImg">
									<img :src="item.profilePhoto" alt="" />
									<span>{{item.nickName}}</span>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<u-popup :show="show" @close="closePopup" :round="20" :closeable='true' :closeOnClickOverlay='false'
			mode="center">
			<view class="popupDiv">
				<h1>{{popupTitle}}</h1>
				<view class="popupDivSpan">
					<u-parse :content="popupContent"></u-parse>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		strategyById,
		strategyListNew,
		browsingHistoryAdd,
		collectAdd,
		userInfoCount,
		userInfoIsNotCollect
	} from '@/api/userCenter.js'
	export default {
		data() {
			return {
				id: '',
				type: -1,
				title: '',
				details: {},
				listSwiperStr: '',
				currentNum: 0,
				photo: [],
				show: false,
				popupTitle: '',
				popupContent: '',
				// 门票
				scenicTickets: [],
				// 底部的推荐
				strategyListNewList: [],
				// 房型
				hotelList: [],
				quantity: {},
				isUserInfoIsNotCollect: false
			};
		},
		onLoad(e) {
			if (e.id && e.type) {
				this.id = e.id
				this.type = e.type
			}
			this.getStrategyById()
			this.getstrategyListNew()
			this.getUserInfoCount()
			let unsrInfo = uni.getStorageSync('userInfo')
			if (unsrInfo.token) {
				this.clickBrowsingHistoryAdd()
				this.getUserInfoIsNotCollect()
			}
		},
		methods: {
			// 是否收藏
			async getUserInfoIsNotCollect() {
				let par = {
					detailsId: this.id
				}
				let res = await userInfoIsNotCollect(par)
				if (res.code == 200) {
					this.isUserInfoIsNotCollect = res.data
				}
			},
			// 足迹收藏数量
			async getUserInfoCount() {
				let par = {
					type: '',
					detailsId: this.id
				}
				if (this.type == 0) {
					par.type = '景区'
				} else if (this.type == 1) {
					par.type = '酒店'
				} else if (this.type == 2) {
					par.type = '美食'
				}
				let res = await userInfoCount(par)
				if (res.code == 200) {
					this.quantity = res.data
				}
			},
			// 点击攻略添加收藏
			async clickCollectAdd() {
				let par = {
					type: '',
					detailsId: this.id
				}
				if (this.type == 0) {
					par.type = '景区'
				} else if (this.type == 1) {
					par.type = '酒店'
				} else if (this.type == 2) {
					par.type = '美食'
				}
				let res = await collectAdd(par)
				if (res.code == 200) {
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					this.getUserInfoIsNotCollect()
					this.getUserInfoCount()
				}
			},
			// 添加足迹
			async clickBrowsingHistoryAdd() {
				let par = {
					type: '',
					detailsId: this.id
				}
				if (this.type == 0) {
					par.type = '景区'
				} else if (this.type == 1) {
					par.type = '酒店'
				} else if (this.type == 2) {
					par.type = '美食'
				}

				let res = await browsingHistoryAdd(par)
				if (res.code == 200) {
					console.log('足迹添加成功');
				}
			},
			// 底部点击
			goJump(item) {
				uni.navigateTo({
					url: `/pages/strategyDetails/strategyDetails?id=${item.id}`
				})
			},
			// 房型点击图片
			amplify(photo) {
				wx.previewImage({
					urls: photo, //接受的是一个数组，默认展示第一张
					current: "",
				});
			},
			// 关闭弹框
			closePopup() {
				this.show = false
			},
			// 唤起弹框
			goPopup(num, title, content) {
				this.popupContent = content
				this.popupTitle = title
				this.show = true
			},
			// 轮播图轮播
			changeSwiper(e) {
				this.currentNum = e.current
				this.listSwiperStr = this.photo[e.current]
			},
			// 获取推荐数据
			async getstrategyListNew() {
				let res = await strategyListNew()
				if (res.code == 200) {
					res.data.forEach(str => {
						str.photo = str.photo.split(',')
					})
					this.strategyListNewList = res.data
				}
			},
			// 获取数据
			async getStrategyById() {
				let lon = this.$store.state.lonLat[0]
				let lat = this.$store.state.lonLat[1]
				let par = {
					id: this.id,
					type: this.type,
					lon: lon ? lon : null,
					lat: lat ? lat : null
				}
				let res = await strategyById(par)
				if (res.code == 200) {
					this.title = res.data.title
					this.details = res.data
					this.photo = this.details.photo
					this.listSwiperStr = this.photo[0]
					this.scenicTickets = res.data.scenicTickets
					this.hotelList = res.data.hotelList
				}
			}
		}
	}
</script>

<style lang="scss">
	.scenicAreaDetails {
		padding-bottom: 100rpx;

		.popupDiv {
			width: 700rpx;
			padding: 20rpx;
			min-height: 600rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.popupDivSpan {
				min-height: 500rpx;
				max-height: 700rpx;
				overflow-y: auto;
				font-size: 28rpx;
				color: #3c3c3c;
			}

			h1 {
				padding: 20rpx;
				font-size: 40rpx;
			}
		}

		.scenicAreaDetailsDiv {
			width: 100%;
			padding: 0 30rpx;

			.scenicAreaDetailsDivStrategy {
				width: 100%;
				margin-top: 20rpx;

				.scenicAreaDetailsDivStrategyTOP {
					font-size: 40rpx;
					padding-left: 20rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.scroll-view_H {
					white-space: nowrap;
					width: 100%;

					.scrollviewHList {
						width: 100%;
						display: flex;
						align-items: center;
						flex-wrap: nowrap;
						gap: 20rpx;

						.scrollviewHItem {
							position: relative;

							.scrollviewHItemtitle {
								width: 100%;
								position: absolute;
								bottom: 0;
								border-radius: 0 0 20rpx 20rpx;
								backdrop-filter: blur(10rpx);
								-webkit-backdrop-filter: blur(10rpx);
								font-size: 28rpx;
								padding: 5rpx 10rpx;

								.scrollviewHItemtitleImg {
									margin-top: 15rpx;
									display: flex;
									align-items: center;
									gap: 10rpx;
									padding-bottom: 10rpx;

									span {
										font-size: 24rpx;
										color: #ffffff;
									}

									img {
										width: 40rpx;
										height: 40rpx;
										border-radius: 50%;
									}
								}

							}

							img {
								width: 300rpx;
								height: 400rpx;
								border-radius: 20rpx;
							}
						}
					}

				}
			}



			.scenicAreaDetailsDivHotelList {
				padding: 20rpx;
				width: 100%;
				background-color: #ffffff;
				border-radius: 20rpx;

				.scenicAreaDetailsDivHotelListCen {
					display: flex;
					justify-content: center;
					flex-direction: column;
					gap: 20rpx;
					padding: 20rpx;
					border-radius: 10rpx;
					background-color: #adadad1f;

					.scenicAreaDetailsDivHotelListCenItem {
						padding-bottom: 20rpx;
						border-bottom: 1rpx solid #6666662b;
						display: flex;
						gap: 10rpx;

						.scenicAreaDetailsDivHotelListCenItemCen {
							width: 100%;

							.scenicAreaDetailsDivHotelListCenItemB {
								margin-top: 10rpx;
								font-size: 30rpx;
								color: #666666;
							}

							.scenicAreaDetailsDivHotelListCenItemTitle {
								width: 100%;
								display: flex;
								justify-content: space-between;

								p {
									font-size: 26rpx;

									span {
										font-size: 40rpx;
										color: red;
									}
								}

								h2 {
									font-size: 36rpx;
									color: #3c3c3c;
								}
							}
						}



						.scenicAreaDetailsDivHotelListCenItemImg {
							min-height: 150rpx;

							img {
								width: 150rpx;
								height: 100%;
								border-radius: 20rpx;
							}
						}

					}
				}

				.scenicAreaDetailsDivHotelListTop {
					font-size: 26rpx;
					color: #1f1f1f;
				}

				h1 {
					font-size: 36rpx;
					color: #000000;
					margin-bottom: 15rpx;
					font-weight: bold;
				}
			}

			.scenicAreaDetailsDivAdmissionFee {
				padding: 20rpx;
				width: 100%;
				background-color: #ffffff;
				border-radius: 20rpx;

				.scenicAreaDetailsDivAdmissionFeeCen {
					background-color: #adadad1f;
					padding: 10rpx;
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					flex-direction: column;
					gap: 20rpx;

					.scenicAreaDetailsDivAdmissionFeeCenItem {
						padding-bottom: 20rpx;
						border-bottom: 1rpx solid #6666662b;

						.scenicAreaDetailsDivAdmissionFeeCenItemGm {
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 24rpx;
							color: #3c9cff;

							p {
								font-size: 40rpx;
								color: red;
							}

							span {
								font-size: 24rpx;
							}
						}

						.scenicAreaDetailsDivAdmissionFeeCenItemTag {
							width: 100%;
							display: flex;
							align-items: center;
							gap: 10rpx;
							margin: 10rpx 0;

							.scenicAreaDetailsDivTagItem {
								padding: 10rpx;
								font-size: 22rpx;
								border: 1rpx solid #3c9cff;
								color: #3c9cff;
								border-radius: 10rpx;
							}
						}

						h2 {
							font-size: 30rpx;
							color: #3c3c3c;
						}
					}
				}

				.scenicAreaDetailsDivAdmissionFeeTop {
					font-size: 26rpx;
					color: #1f1f1f;
				}

				h1 {
					font-size: 36rpx;
					color: #000000;
					margin-bottom: 15rpx;
					font-weight: bold;
				}
			}

			.scenicAreaDetailsDivList {
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 20rpx;
				margin-bottom: 30rpx;

				.scenicAreaDetailsDivListItem {
					display: flex;
					align-items: center;
					gap: 10rpx;
					border-bottom: 1rpx solid #66666636;
					padding: 10rpx 0 20rpx;

					span {
						font-size: 30rpx;
						color: #666666;
					}
				}
			}

			.scenicAreaDetailsDivIcon {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: 30rpx 0;
				background-color: #ffffff;
				padding: 20rpx 0;
				border-radius: 40rpx;

				.scenicAreaDetailsDivIconItem {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					gap: 10rpx;
					font-size: 26rpx;

					img {
						width: 80rpx;
						height: 80rpx;
					}
				}
			}

			.scenicAreaDetailsDivTag {
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				gap: 10rpx;

				.scenicAreaDetailsDivTagItem {
					padding: 10rpx;
					font-size: 22rpx;
					border: 1rpx solid #3c9cff;
					color: #3c9cff;
					border-radius: 10rpx;
				}
			}

			.scenicAreaDetailsDivPrice {
				font-size: 26rpx;
				color: #666666;
			}

			.scenicAreaDetailsDivTitle {
				margin: 20rpx 0 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.scenicAreaDetailsDivTitleDiv {
					display: flex;
					align-items: center;
					gap: 10rpx;

					img {
						width: 50rpx;
						height: 50rpx;
					}
				}



				.scenicAreaDetailsDivTitleL {
					width: 85%;
					font-size: 40rpx;
					font-weight: bold;
					color: #1f1f1f;
				}

			}
		}

		.scenicAreaDetailsSwiper {
			margin-top: -560rpx;
			padding: 0 30rpx;

			.indicator-num {
				padding: 2px 0;
				background-color: rgba(0, 0, 0, 0.35);
				border-radius: 100px;
				width: 35px;
				@include flex;
				justify-content: center;

				&__text {
					color: #ffffff;
					font-size: 12px;
				}
			}
		}

		.scenicAreaDetailsTop {
			width: 100%;

			img {
				opacity: 0.5;
				width: 100%;
				height: 750rpx;
			}
		}

		::v-deep .u-status-bar,
		::v-deep .u-navbar__content {
			background: none !important;
		}
	}

	page {
		background-color: #f7f7f7;
	}
</style>